{% extends 'EstocBundle:Client:clientHome.html.twig' %}

{% block content_client %}
    <div class="container-space home-container">
        <div class="menu_titulo clearfix pure-g">
            <div class="pure-u-2-3">IMÁGENES EN EL CARRITO DE COMPRAS</div>
            <div class="pure-u-1-3">RESUMEN DE CUENTAS</div>
            <hr />
        </div>
        <div class="clearfix pure-g">
            {{ form_start(form) }}
            <div class="pure-u-2-3 container-kart-scroll">
                {% for detail in form.PurchaseDetails %}
                    <div class="container-kart-detail">
                        <div class="image-kart-detail">
                            <img class="image-box" src="{{ (vich_uploader_asset(detail.vars.data.image,'file')) | apply_filter('search_thumb') }}" />
                            <div class="delete-item-kart" ><a href="" onclick="" class="a-delete-item-kart" itemid="{{ detail.vars.data.image.id }}">BORRAR</a></div>
                        </div>
                        <div class="detail-kart-detail">
                            <ul class="ul-detail-kart-detail">
                                {% for size in detail.imageSize %}
                                    <li>{{ form_widget(size,{'attr':{'class':'imageSizeClick'}}) }}{{ form_label(size) }}</li>
                                {% endfor %}
                                <li>{{ form_widget(detail.exclusive,{'attr':{'class':'imageExclusiveClick'}}) }}{{ form_label(detail.exclusive) }}</li>
                                <input type="hidden" class="calculate-subtotal-price" id="{{ loop.index }}-size-price" name="size-price" value="0">
                            </ul>
                        </div>
                    </div>
                    {{ form_row(detail.image.exclusive) }}
                {% endfor %}
            </div>
            <div class="pure-u-1-3">
                <div class="center-middle container-space">
                    <div class="pure-g">
                        <div class="pure-u-2-3 menu_titulo">CANTIDAD DE IMAGENES:</div>
                        <div class="pure-u-1-3 align-right" id="cant_imagenes"></div>
                    </div>
                    <div class="pure-g">
                        <div class="pure-u-2-3 menu_titulo">SUBTOTAL:</div>
                        <div class="pure-u-1-3 align-right" id="subtotal_imagenes"></div>
                    </div>
                    <div class="pure-g">
                        <div class="pure-u-2-3 menu_titulo">IVA 12%:</div>
                        <div class="pure-u-1-3 align-right" id="iva_imagenes"></div>
                    </div>
                    <div class="pure-g">
                        <div class="pure-u-2-3"></div>
                        <div class="pure-u-1-3"></div>
                    </div>
                    <div class="pure-g highlight">
                        <div class="pure-u-2-3 menu_titulo">TOTAL:</div>
                        <div class="pure-u-1-3 align-right" id="total_imagenes"></div>
                    </div>
                    <div class="pure-g">
                        <div class="pure-u-2-3"></div>
                        <div class="pure-u-1-3"></div>
                    </div>
                    <div class="pure-g align-center">
                        <div class="pure-u">
                            {{ form_widget(form.buy) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{ form_end(form) }}
        <div class="clearfix pure-g">
            <hr />
            <span class="kart-footer">
                Al hacer click en comprar estoy aceptando los terminos y condiciones de ESTOC.
                Al hacer click en comprar estoy aceptando el contrato de descarga de imagenes de estoc.
                Al hacer click en el boton comprar usted esta aceptando la compra y los valores de la misma.
            </span>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {

            function calcular_importe(){
                importe_total = 0;
                $(".calculate-subtotal-price").each(
                    function(index, value) {
                        importe_total = importe_total + eval($(this).val());
                    }
                );

                $(".imageExclusiveClick").each(
                    function(index, value) {
                        if ($(this).is(':checked')){
                            importe_total = importe_total + {{ priceExclusive }};
                        }
                    }
                );
                return importe_total;
            }

            function setImporte(){
                importe = calcular_importe();
                $("#subtotal_imagenes").empty().append('$'+numberWithCommas(importe));
                $("#iva_imagenes").empty().append('$'+numberWithCommas(importe*{{ priceIva }}));
                $("#total_imagenes").empty().append('$'+numberWithCommas(importe+(importe*{{ priceIva }})));
            }

            function numberWithCommas(n) {
                var parts=n.toString().split(".");
                return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
            }

            $('.imageSizeClick').click(function(){
                var price_id = $(this).val();
                var element = $(this);
                $.ajax({
                    type: "POST",
                    url: '{{ path('getSizePrice') }}',
                    data: {id : price_id}, // serializes the form's elements.
                    success: function(data)
                    {
                        if(data.response != 'false'){
                            element.parent().parent().children('input').val(data);
                            setImporte();

//                            console.log(data); // show response from the php script.
                        }else{
                            console.log(data); // show response from the php script.
                        }
                    }
                });
            });

            $('.imageExclusiveClick').click(function(){
                setImporte();
            });

            $('#cant_imagenes').append($('.container-kart-detail').length);

            $('.a-delete-item-kart').click(function(){
                if (confirm('Esta seguro que desea borrar este item del carrito??')) {
                    var item_id = $(this).attr('itemid');
                    $.ajax({
                        type: "POST",
                        url: '{{ path('clientRemoveFromKart') }}',
                        data: {id : item_id}, // serializes the form's elements.
                        success: function(data)
                        {
                            if(data == 'true'){
                                console.log('object Removed From kart'); // show response from the php script.
                                location.reload();
                            }else{
                                console.log(data); // show response from the php script.
                            }
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}

{% form_theme form _self %}

{% block form_label %}
    {% spaceless %}
        {% if label is not sameas(false) %}
            {% if not compound %}
                {% set label_attr = label_attr|merge({'for': id}) %}
            {% endif %}
            {% if required %}
                {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
            {% endif %}
            {% if label is empty %}
                {% set label = name|humanize %}
            {% endif %}
            <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{% autoescape false %}{{ label|trans({}, translation_domain) }}{% endautoescape %}</label>
        {% endif %}
    {% endspaceless %}
{% endblock form_label %}